Fix hero overlap caused by fixed header by adding layout spacing in Landing page#403
Fix hero overlap caused by fixed header by adding layout spacing in Landing page#403Ihiechi wants to merge 2 commits intoneed4deed-org:developfrom
Conversation
|
I noticed it's linked to close issue #385 (briefed checkmark on volunteer type tags) but the change looks like a Landing page layout fix just wanted to flag it in case the wrong issue number got linked by mistake. |
nadavosa
left a comment
nadavosa
left a comment
There was a problem hiding this comment.
PR #403 Review: Fix landing page overlap with fixed header
The bug is real and the approach is understandable, but the implementation is fragile:
1. Hardcoded 80px breaks on mobile/tablet (main issue)
The project already defines a responsive CSS variable for the header height:
- Mobile:
--layout-static-page-header-height: 64px - Tablet:
--layout-static-page-header-height: 76px - Desktop:
--layout-static-page-header-height: 80px
style={{ paddingTop: "80px" }} only matches the desktop value — on mobile it over-compensates by 16px, on tablet by 4px. The fix is:
style={{ paddingTop: "var(--layout-static-page-header-height)" }}This stays in sync with the header height automatically across all breakpoints.
2. Inline style bypasses the design system
The project uses styled-components throughout. Applying layout spacing via an inline style prop is inconsistent — consider moving this padding into the AppContainer styled component or a wrapper, so it's part of the design token system.
3. PR checklist
"Tests added/updated" and "Documentation updated" are checked, but the diff is a single-line style change with no test or documentation changes.
|
Thanks for the feedback! I've updated the implementation to use the responsive CSS variable so it adapts across breakpoints, and kept the change minimal to avoid affecting layout structure. Also corrected the checklist items. |
3 participants
Description
Fixes an issue where the hero section was rendered under the fixed header.
The header uses position: fixed which removes it from normal document flow, causing the hero content to overlap.
This fix adds layout spacing in the Landing page to offset the header height and ensure proper rendering of all sections.
Related Issues
Thanks for pointing that out — you're right, this fix is not related to issue #385. I've removed the reference from the PR description.
Changes
Screenshots / Demos
N/A (layout fix)
Checklist